{% extends 'bootstrap/base.html' %}

{% block title %}
	{% if title %}
		{{title}} - Mircoblog
	{% else %}
		Welcome to Microblog
	{% endif %}
{% endblock %}
{% block navbar %}
	<nav class = "navbar navbar-default">
			<div class = "container">
				<div class = "navbar-header">
					<button type = "button" class="navbar-toggle collapsed" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expanded = "flase">
						<span class="sr-only">Toggle navigation </span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class = "navbar-brand" href="{{url_for('main.index') }}">Microblog</a>
				</div>
				<div class="collapse navbar-collapse" id ="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="{{url_for('main.index')}}">Home</a></li>
						<li><a href="{{url_for('main.explore')}}">Explore</a></li>
					</ul>
					{% if g.search_form %}
						<form class = "navbar-form navbar-left" method = "GET" action = "{{url_for('main.search')}}">
							<div class = "form-group">
								{{ g.search_form.q(size = 20, class = 'form-control', placeholder = g.search_form.q.label.text)}}
							</div>
						</form>
					{% endif %}
					<ul class="nav navbar-nav navbar-right">
						{% if current_user.is_anonymous %}
							<li><a href="{{url_for('auth.login')}}">Login</a></li>
						{% else %}
							<li>
								<a href="{{url_for('main.messages')}}">Messages
									{% set new_messages = current_user.new_messages() %}
									{% if new_messages %}
										<span id = "message_count" ,class = "badge"
											style="visibility:{% if new_messages %} visible
															  {% else %} hidden {% endif %};">
											{{new_messages}}
										</span>
									{% endif %}
								</a> 
							</li>

							<li><a href="{{url_for('main.user',username = current_user.username)}}">Profile</a></li>
							<li><a href="{{url_for('auth.logout')}}">Logout</a></li>
						{% endif%}
					</ul>
				</div>
			</div>
	</nav>
{% endblock %}

{% block content %}
	<div class="container">
		{% with messages = get_flashed_messages()%}
			{%if messages%}
				{%for message in messages %}
					<div class="alert alert-info" role = "alert">
						{{message}}
					</div>
				{%endfor%}
			{% endif%}
		{% endwith %}
		{# application content need to be provided in the app_content block#}
		{% block app_content %}{% endblock %}
	</div>
{% endblock %}

{% block scripts %}
	{{super()}}
	{{moment.include_moment()}}
	{{moment.lang(g.locale)}}
	<script>
		$(function(){
			var timer = null;
			var xhr = null;

			$('.user_popup').hover(
				function(event){
					var elem = $(event.currentTarget);
					timer = setTimeout(function(){
						timer = null;
						xhr = $.ajax(
							'/user/' + elem.first().text().trim() + '/popup').done(
								function(data) {
									xhr = null;
									elem.popover({
										trigger : 'manual',
										html : true,
										animation: false,
										container: elem,
										content: data
									}).popover('show');
									flask_moment_render_all();
								}
							);
					},1000);
				},
				function(event){
					var elem = $(event.currentTarget);
					if(timer) {
						clearTimeout(timer);
						timer = null;
					}
					else if(xhr) {
						xhr.abort();
						xhr = null;
					}
					else {
						elem.popover('destory')
					}
				}
			);
		});
		function set_message_count(n) {
			$('#message_count').text(n);
			$('#message_count').css('visibility', n ? 'visible':'hidden');
			}
		{% if current_user.is_authenticated %}
			$(function() {
				var since = 0;
				setInterval(function(){
					$.ajax('{{url_for('main.notifications')}}?since='+since).done(
						function(notifications) {
							for (var i = 0; i < notifications.length; i++){
								if(notifications[i].name == 'unread_message_count' )
									set_message.count(notifications[i].data);
								since = notifications[i].timestamp;
							}
						}
					);
				},10000);	
			});
		{% endif %}
	</script>
{% endblock %}
